<!-- 错误类型统计人员 -->
<template>
  <div>
    <div ref="faultChart" style="width: 100%; height: 450px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Fault',
  data() {
    return {
      chart: null,
      missionType: this.$store.state.mission,
      studentClassId: this.$store.state.current,
      faultInfo: []
    }
  },
  watch: {
    '$store.state.mission': {
      handler(newVal) {
        this.missionType = newVal
        this.getFaultInfo()
      },
      immediate: true
    },
    '$store.state.current': {
      handler(newVal) {
        this.studentClassId = newVal
        this.getFaultInfo()
      },
      immediate: true
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.chart?.dispose()
  },
  methods: {
    handleResize() {
      this.chart?.resize()
    },
    initChart() {
      const option = {
        grid: {
          left: '5%',
          right: '15%',
          bottom: '5%',
          top: '8%',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#00ffff',
              fontSize: 16,
              fontFamily: 'siyuan',
              fontStyle: 'italic',
              textShadow: '0 0 15px rgba(0,255,255,0.6)'
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: []
        }, {
          zlevel: 3,
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          position: 'right',
          axisLabel: {
            textStyle: {
              color: '#00ffff',
              fontSize: '18',
              padding: [0, 0, 10, 0],
              textShadow: '0 0 15px rgba(0,255,255,0.6)'
            },
            formatter: value => value + '%'
          },
          data: []
        }],
        series: [
          {
            name: '故障率',
            type: 'bar',
            zlevel: 3,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(0,255,255,0.2)'
                }, {
                  offset: 1,
                  color: 'rgba(0,255,255,0.9)'
                }]),
                shadowBlur: 25,
                shadowColor: 'rgba(0,255,255,0.6)'
              },
            },
            barWidth: 12,
            data: [],
            animationDuration: 2500,
            animationEasing: 'cubicInOut',
            animationDelay: idx => idx * 200
          },
          {
            z: 1,
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolRotate: '180',
            symbolSize: [18, 12],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(0,255,255,0.9)'
            }, {
              offset: 1,
              color: 'rgba(0,255,255,1)'
            }]),
            data: [],
            symbol: 'triangle',
            symbolOffset: ['52%', 0],
            animationDuration: 2500,
            animationEasing: 'cubicInOut',
            animationDelay: idx => idx * 200
          },
          {
            type: 'pictorialBar',
            animationDuration: 0,
            hoverAnimation: false,
            symbolRepeat: 'fixed',
            label: {
              show: false,
              position: ['97%', '40%'],
              fontSize: 18,
              color: '#00ffff',
            },
            legendHoverLink: false,
            symbolMargin: '10%',
            symbol: 'roundRect',
            symbolSize: [4, 32],
            itemStyle: {
              normal: {
                color: 'rgba(0,255,255,0.15)',
                borderColor: 'rgba(0,255,255,0.4)',
                borderWidth: 1
              }
            },
            data: [],
            z: 0,
          },
        ]
      }

      this.chart = echarts.init(this.$refs.faultChart)
      this.chart.setOption(option)
    },
    async getFaultInfo() {
      try {
        const response = await this.$axios.get(`/group/fault/${this.studentClassId}/${this.missionType}`)
        if (response.data?.data) {
          this.faultInfo = response.data.data
          if (Array.isArray(this.faultInfo) && this.faultInfo.length > 0) {
            const yLabel = this.faultInfo.map(item => item.task_type || '')
            const yData = this.faultInfo.map(item => item.fault_rate || 0)
            
            this.chart.setOption({
              yAxis: [{
                data: yLabel
              }, {
                data: yData
              }],
              series: [{
                data: yData
              }, {
                data: yData
              }, {
                data: yData
              }]
            })
          } else {
            this.resetChartData()
          }
        }
      } catch (error) {
        console.error('获取数据失败:', error)
        this.resetChartData()
      }
    },
    resetChartData() {
      this.chart.setOption({
        yAxis: [{
          data: []
        }, {
          data: []
        }],
        series: [{
          data: []
        }, {
          data: []
        }, {
          data: []
        }]
      })
    }
  }
}
</script>

<style scoped>
.fault-chart {
  width: 100%;
  height: 450px;
}

@media screen and (max-width: 1400px) {
  .fault-chart {
    height: 400px;
  }
}

@media screen and (max-width: 1200px) {
  .fault-chart {
    height: 350px;
  }
}
</style>